
<template>
  <div class="bottom" v-if="del">
    <button @click="handelDel" color="#06f05f">清除已选择</button>
  </div>
</template>

<script setup>
import { ref, reactive, watchEffect } from "vue";
import { useTodoStore } from "../store/useTodoStore.js";
import { storeToRefs } from 'pinia'
const TodoStore = useTodoStore();

//将pinia中的数据改变为响应式数据
const {del,todos} = storeToRefs(TodoStore)

function handelDel() {
    for (let i = 0; i<todos.value.length; i++) { 
        // console.log(todos.value[i].value);
      if (todos.value[i].isDone == true) {
        todos.value.splice(i, 1)
      }
  }

  for (let i = 0; i<todos.value.length; i++) { 
        // console.log(todos.value[i].value);
      if (todos.value[i].isDone == true) {
        todos.value.splice(i, 1)
      }
    }
}


</script>

<style scoped>
.bottom {
  position: absolute;
  bottom: 10px;
  left: 50px;
}


</style>
